<script setup lang="tsx" name="XtxTabs">
import { useSlots, RendererNode, RendererElement, VNode, provide, toRef, toRefs } from 'vue'
const slots = useSlots()  //插槽列表
const arr = slots?.default?.() //默认插槽列表数据
// 循环判断一下每一项的name 是否是XtxTabsPane
const panes: any = []
arr?.forEach((item: any) => {
  if (item.type.name === 'XtxTabsPane') {
    panes.push(item)
  } else {
    if (item.children.length) {
      item.children.forEach((pane: any) => {
        panes.push(pane)
      })
    }
  }
})

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void
}>()
//将某个标题的name传递给父组件
const clickfn = (item: VNode<RendererNode, RendererElement, {
  [key: string]: any;
}>) => {
  emit('update:modelValue', item.props?.name)
}
const { modelValue } = toRefs<any>(props)
provide('activeName', modelValue)

const VNodeBox = () => {
  const navs = (
    <nav>
      {
        panes?.map((item: any) => {
          // 外层{} 表示的是要解析的变量
          // 内层{} 表示的是对象
          return <a onClick={() => { clickfn(item) }}
            class={{ active: props.modelValue === item.props?.name }}
            href="javascript:;">{item.props?.label}</a>
        })
      }
    </nav>
  )
  return (<div class="xtx-tabs">{[navs, panes]}</div>)
}
</script>

<template>
  <!-- <div class="xtx-tabs">tabs</div> -->
  <VNodeBox></VNodeBox>
</template>

<style lang="less">
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>